import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet,
  ListView,
  TouchableOpacity,
  ToastAndroid,
  Image,
  Dimensions,
  TextInput,
  Button,
  ScrollView,
  FlatList,
  TouchableNativeFeedback,
} from 'react-native';
import {Modal, TouchableHighlight, PixelRatio} from 'react-native';
import ScrollableTabView, {
  DefaultTabBar,
} from 'react-native-scrollable-tab-view';
import Toast from '../component/Toast';
import Global from '../component/Global';
import BackImage from '../component/BackImage';

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度
const WIN_WIDTH = Dimensions.get('window').width;

class ChargeScene extends Component {
  static navigationOptions = ({navigation}) => ({
    title: '用户查询',
    headerStyle: {
      backgroundColor: 'rgba(0, 191 ,255, 0.5)',
    },
    headerBackImage: <BackImage />, //使用组件
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    headerRight: (
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={navigation.getParam('setModalVisible')}>
        <Image
          style={{height: 40, width: 50, marginRight: 10}}
          source={require('../../img/search.png')}
        />
      </TouchableOpacity>
    ),
  });

  constructor(props) {
    super(props);
    this.state = {
      animationType: 'none', //none slide fade
      modalVisible: false, //模态场景是否可见
      transparent: false, //是否透明显示
      custCode: '',
      custName: '',
      bookName: '',
      count: '',
      dataSource: '',
    };
  }

  setModalVisible = visible => {
    this.setState({modalVisible: visible});
  };

  //组件挂载完成后执行的方法
  componentDidMount() {
    this.props.navigation.setParams({setModalVisible: this.setModalVisible});
  }

  //下载数据
  getData(pyCode, custCode, custName) {
    let formData = new FormData();
    formData.append('pyCode', pyCode);

    formData.append('custCode', custCode);
    formData.append('custName', custName);
    var opts = {
      method: 'POST',
      body: formData,
    };
    fetch(global.server.url + '/custInfo/selectList', opts)
      .then(response => response.json())
      .then(jsonData => {
        let count = 0;
        let datas = [];
        datas = datas.concat(jsonData);
        var dataSource = {
          tab: '全部',
          list: datas,
        };
        this.setState({
          loaded: true,
          count: datas.length,
          dataSource: dataSource,
        });
      })
      .catch(error => {
        alert('网络异常，请稍后再试！' + error);
      });
  }

  render() {
    //加载后
    return (
      <FlatList
        tabLabel={this.state.dataSource.tab}
        data={this.state.dataSource.list}
        renderItem={({item}) => (
          <TouchableNativeFeedback
            onPress={() => {
              this.props.navigation.navigate('CostHisScene', {
                custCode: item.custCode,
                currMonth: '',
              });
            }}>
            <View style={styles.textMainStyle}>
              <Text style={styles.margin}>表本名称： {item.bookName}</Text>
              <Text style={styles.margin}>用户编号：{item.custCode}</Text>
              <Text style={styles.margin}>用户名称：{item.custName}</Text>
              <Text style={styles.margin}>用户地址：{item.address}</Text>
              <Text style={styles.margin}>联系电话： {item.tel}</Text>
            </View>
          </TouchableNativeFeedback>
        )}
        ListHeaderComponent={this._renderHeader()}
        ListEmptyComponent={this.emptyComponent}
      />
    );
  }

  searchData() {
    let pyCode = this.state.pyCode;
    let custCode = this.state.custCode;
    let custName = this.state.custName;
    this.getData(pyCode, custCode, custName);
    this.setModalVisible(false);
  }

  emptyComponent() {
    return (
      <View
        style={{
          backgroundColor: 'white',
          flex: 1,
          height: 500,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text></Text>
      </View>
    );
  }

  //渲染头部
  _renderHeader = () => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>总数：{this.state.count}</Text>
        <View style={styles.headerSeparator}></View>
        <View style={{alignItems: 'center', flex: 1}}>
          <Modal
            animationType={this.state.animationType}
            transparent={this.state.transparent}
            visible={this.state.modalVisible}
            onRequestClose={() => {
              this.setModalVisible(false);
            }}>
            <View
              style={[
                styles.modalContainer,
                {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
              ]}>
              <View
                style={[
                  styles.innerContainer,
                  {backgroundColor: '#F0F8FF', padding: 20},
                ]}>
                <View style={styles.row}>
                  <View>
                    <Text style={styles.tips}>请输入一个或多个条件</Text>
                  </View>
                  <TextInput
                    style={styles.textInput}
                    placeholder={'拼音码'}
                    onChangeText={text => {
                      this.pyCode = text;
                      this.setState({pyCode: text});
                    }}
                    //输入框下划线
                    underlineColorAndroid={'transparent'}
                  />
                  <TextInput
                    style={styles.textInput}
                    placeholder={'用户名称'}
                    onChangeText={text => {
                      this.custName = text;
                      this.setState({custName: text});
                    }}
                    //输入框下划线
                    underlineColorAndroid={'transparent'}
                  />
                  <TextInput
                    style={styles.textInput}
                    placeholder={'用户编号'}
                    onChangeText={text => {
                      this.custCode = text;
                      this.setState({custCode: text});
                    }}
                    //输入框下划线
                    underlineColorAndroid={'transparent'}
                  />
                </View>
                <Text
                  onPress={this.setModalVisible.bind(this, false)}
                  style={{fontSize: 20, marginTop: 10}}>
                  关闭
                </Text>
                <Text
                  onPress={this.searchData.bind(this)}
                  style={{fontSize: 20, marginTop: 10}}>
                  确定
                </Text>
              </View>
            </View>
          </Modal>
        </View>
      </View>
    );
  };
}

var width = WIN_WIDTH / 2;
const styles = StyleSheet.create({
  textMainStyle: {
    flex: 1,
    backgroundColor: 'white',
    padding: 10,
    paddingVertical: 20,
    marginLeft: 5,
    marginRight: 5,
    marginVertical: 3,
    borderColor: '#dddddd',
    borderStyle: null,
    borderWidth: 0.5,
    borderRadius: 2,
    shadowColor: 'gray', // 设置阴影
    shadowOffset: {width: 0.5, height: 0.5},
    shadowOpacity: 0.4, // 透明度
    shadowRadius: 1,
    elevation: 2, //   高度，设置Z轴，可以产生立体效果
  },
  header: {
    height: 44,
    backgroundColor: '#F5FCFF',
  },
  headerText: {
    flex: 1,
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'right',
    marginTop: 5,
    marginRight: 10,
  },
  headerSeparator: {
    height: 1,
    backgroundColor: 'black',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    padding: 40,
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
  },
  tips: {
    textAlign: 'center',
    marginBottom: 5,
    fontSize: 20,
  },
  textInput: {
    height: 40,
    width: width,
    marginBottom: 5,
    backgroundColor: 'white',
    textAlign: 'center',
    borderRadius: 5,
  },
});
module.exports = ChargeScene;
